<template>
  <el-cart>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">活动管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="success" plain>添加用户</el-button>
    </div>
    <!-- 列表 -->
    <el-table
      ref="singleTable"
      :data="userslist"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column property="role_name" label="姓名" width="120"></el-table-column>
      <el-table-column property="email" label="邮箱" width="120"></el-table-column>
      <el-table-column property="mobile" label="电话"></el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">{{scope.row.create_time | fmtdata}}</template>
      </el-table-column>
      <el-table-column label="用户状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column property="mg_state" label="操作">
        <template>
          <el-row>
            <el-button size="min" plain type="primary" icon="el-icon-edit" circle></el-button>
            <el-button size="min" plain type="danger" icon="el-icon-delete" circle></el-button>
            <el-button size="min" plain type="success" icon="el-icon-check" circle></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
  </el-cart>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      input3: "",
      userslist: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleCurrentChange() {}
  },
  created() {
    this.$http.get("/getuserslist").then(res => {
      const {
        code,
        posts: {
          data,
          meta: { msg, status },
          users
        }
      } = res.data;
      if (status === 200) {
        this.userslist = users;
        //   这里需要加个total来赋值
        this.$message.success(msg);
      } else {
        this.$message.error("请求数据失败");
      }
    });
  },
  mounted() {}
};
</script>
<style>
.input-with-select {
  width: 500px !important;
}
</style>